.dswd-joinus-first {
    margin-top: 100px;
    .first-wrap {
        position: relative;
        .joinus-first-text {
            position: absolute;
            top: 50%;
            left: 36px;
            transform: translateY(-50%);
            z-index: 1000;
            .joinus-en-title {
                font-size: 33px;
                font-weight: 400;
                color: #fff;
                line-height: 33px;
                letter-spacing: 1px;
            }
            .joinus-title {
                margin-top: 13px;
                font-size: 36px;
                font-weight: 500;
                color: #fff;
                line-height: 36px;
                letter-spacing: 1px;
            }
            .joinus-sub-title {
                margin-top: 30px;
                font-size: 20px;
                font-weight: 400;
                color: #fff;
                line-height: 20px;
                cursor: pointer;
            }
        }
        .oper-button {
            position: absolute;
            bottom: 50px;
            left: 36px;
            z-index: 1000;
            .custom-button {
                padding: 13px 51px;
                border-radius: 33px;
                display: inline-block;
                font-size: 16px;
                font-weight: 600;
                color: #FFFFFF;
                line-height: 22px;
                border: 1px solid #078FD8;
                cursor: pointer;
            }
            .social-button {
                background: #078FD8;
                &:hover {
                    background: linear-gradient(270deg, #8fe5ff 0%, #078FD8 100%);
                }
            }
            .school-button {
                margin-left: 32px;
                border: 1px solid #078FD8;
                color: #fff;
                &:hover {
                    color: #FFFFFF;
                    background: linear-gradient(270deg, #8fe5ff 0%, #078FD8 100%);
                }
            }
        }
        .aboutus-first-img {
            position: relative;
            img {
                width: 100%;
                vertical-align: middle;
            }
            .img-bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 100;
                background: rgba(74, 74, 74, 0.3);
                top: 0;
                left: 0;
            }
        }
    }
}

.dswd-p-joinus-first {
    margin-top: 93px;
    .first-wrap {
        position: relative;
        .joinus-first-text {
            position: absolute;
            top: 50%;
            left: 36px;
            transform: translateY(-50%);
            z-index: 1000;
            .joinus-en-title {
                font-size: 24px;
                font-weight: 400;
                color: #fff;
                line-height: 24px;
            }
            .joinus-title {
                margin-top: 10px;
                font-size: 30px;
                font-weight: 500;
                color: #fff;
                line-height: 30px;
            }
            .joinus-sub-title {
                margin-top: 15px;
                font-size: 18px;
                font-weight: 400;
                color: #fff;
                line-height: 22px;
            }
            .oper-button {
                margin-top: 16px;
                .custom-button {
                    padding: 10px 33px;
                    border-radius: 33px;
                    display: inline-block;
                    font-size: 12px;
                    font-weight: 600;
                    color: #FFFFFF;
                    line-height: 17px;
                    border: 1px solid #078FD8;
                    cursor: pointer;
                }
                .social-button {
                    background: #078FD8;
                    &:hover {
                        background: linear-gradient(270deg, #8fe5ff 0%, #078FD8 100%);
                    }
                }
                .school-button {
                    margin-left: 20px;
                    border: 1px solid #078FD8;
                    color: #078FD8;
                    &:hover {
                        color: #FFFFFF;
                        background: linear-gradient(270deg, #8fe5ff 0%, #078FD8 100%);
                    }
                }
            }
        }
        .aboutus-first-img {
            position: relative;
            img {
                width: 100%;
                vertical-align: middle;
            }
            .img-bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 100;
                background: rgba(74, 74, 74, 0.3);
                top: 0;
                left: 0;
            }
        }
    }
}

.dswd-m-joinus-first {
    margin-top: 93px;
    .first-wrap {
        position: relative;
        .joinus-first-text {
            position: absolute;
            top: 50%;
            left: 10px;
            transform: translateY(-50%);
            z-index: 1000;
            .joinus-en-title {
                font-size: 18px;
                font-weight: 400;
                color: #fff;
                line-height: 20px;
            }
            .joinus-title {
                margin-top: 8px;
                font-size: 24px;
                font-weight: 500;
                color: #fff;
            }
            .joinus-sub-title {
                margin-top: 14px;
                font-size: 16px;
                font-weight: 400;
                color: #fff;
                line-height: 22px;
            }
            .oper-button {
                margin-top: 10px;
                .custom-button {
                    padding: 10px 33px;
                    border-radius: 33px;
                    display: inline-block;
                    font-size: 12px;
                    font-weight: 600;
                    color: #FFFFFF;
                    line-height: 17px;
                    border: 1px solid #078FD8;
                    cursor: pointer;
                }
                .social-button {
                    background: #078FD8;
                    &:hover {
                        background: linear-gradient(270deg, #8fe5ff 0%, #078FD8 100%);
                    }
                }
                .school-button {
                    margin-left: 20px;
                    border: 1px solid #078FD8;
                    color: #fff;
                    &:hover {
                        color: #FFFFFF;
                        background: linear-gradient(270deg, #8fe5ff 0%, #078FD8 100%);
                    }
                }
            }
        }
        .aboutus-first-img {
            position: relative;
            img {
                width: 100%;
                vertical-align: middle;
            }
            .img-bg {
                position: absolute;
                width: 100%;
                height: 100%;
                z-index: 100;
                background: rgba(74, 74, 74, 0.3);
                top: 0;
                left: 0;
            }
        }
    }
}